<template>
	<view class="splash" :style="{backgroundColor:PRIMARY_COLOR}">

		<view class="slogan">
			Find your Gadget
		</view>


		<image src="../../static/images/splash/Saly-19.png" class="cover" mode="widthFix" />

		<view class="startButton" @click="goLoginPage">
			<text :style="{color:PRIMARY_COLOR}">
				开始探索
			</text>
		</view>

	</view>
</template>

<script setup>
	import {
		PRIMARY_COLOR
	} from '../../constants/color.js'

	// 跳转登录页面
	const goLoginPage = () => {
		uni.redirectTo({
			url: '/pages/login/login',
			animationType: 'pop-in',
			animationDuration: 200
		})
	}


	uni.stopPullDownRefresh();
</script>

<style scoped lang="scss">
	.splash {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}

	.slogan {
		margin-top: 140rpx;
		width: fit-content;
		font-size: 130rpx;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 138rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.cover {
		width: 100%;
	}

	.startButton {
		width: 628rpx;
		height: 140rpx;
		text-align: center;
		background: #fff;
		line-height: 140rpx;
		border-radius: 20rpx;
		margin-top: 78rpx;
		box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);

		font-size: 20px;
		font-weight: 700;
		letter-spacing: 0px;


		&:active {
			opacity: 0.8;
			transition: all 0.3s;
		}
	}
</style>